<template>
    <div>
      <ul>
        <li v-for="product in products" :key="product.id">
          {{ product.name }} - {{ product.price }}
          <button @click="addToCart(product)">Add to Cart</button>
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  import { mapActions } from 'vuex';
  
  export default {
    data() {
      return {
        products: [
          { id: 1, name: '产品1', price: 100 },
          { id: 2, name: '产品2', price: 200 },
        ]
      };
    },
    methods: {
      ...mapActions(['addProductToCart']),
      addToCart(product) {
        this.addProductToCart(product);
      }
    }
  };
  </script>